<template>
  <div>
    <!-- 标题 -->
    <van-nav-bar
      title="头像与个人信息"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- 头像 -->
    <van-cell
      title="头像"
      center
      to="/changephoto"
    >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-image
          fit="contain"
          :src="'apis/kuan_api/photo/'+$store.state.user.user_img"
          round
          class="img"
          style="border:1px solid lightgray"
        />
      </template>
    </van-cell>
    <!-- 个人主页背景 -->
    <van-cell
      title="个人主页背景"
      center
    >
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <template #right-icon>
        <van-image
          src="https://img1.baidu.com/it/u=1703711924,229959213&fm=253&fmt=auto&app=120&f=PNG?w=192&h=192"
          round
          class="img"
        />
      </template>
    </van-cell>
    <router-link to="/setuser">
      <van-cell
        title="用户名"
        :value="$store.state.user.user_nickname ?$store.state.user.user_nickname:$store.state.user.user_name"
      />
    </router-link>
    <van-cell
      title="签名"
      :value="$store.state.user.Signature"
      @click="setsignature"
    />
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <div class="box">
        <p class="title">修改签名</p>
        <van-field
          v-model="message"
          rows="1"
          autosize
          type="textarea"
          maxlength="60"
          show-word-limit
        />
      </div>
      <div style="text-align:right;margin-right:15px">
        <van-button
          class="btn"
          @click="exit"
        >取消</van-button>
        <van-button
          class="btn"
          @click="change"
        >确定</van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "PersonInfo",
  data() {
    return {
      show: false,
      message: "",
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    setsignature() {
      this.show = true;
    },
    exit() {
      this.show = false;
      this.message = "";
    },
    change() {
      this.axios
        .post("apis/kuan_api/update.php", {
          userid: this.$store.state.user.user_id,
          signature: this.message,
        })
        .then((res) => {
          console.log(res);
          this.$toast.success("修改成功！");
          this.message = "";
          this.show = false;
          this.getuser();
        })
        .catch((err) => {
          console.error(err);
        });
    },

    getuser() {
      this.axios
        .post("apis/kuan_api/searchUser.php", {
          userid: this.$store.state.user.user_id,
        })
        .then((res) => {
          sessionStorage.setItem("user", JSON.stringify(res.data.users[0]));
          this.$store.state.user = res.data.users[0];
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
  created() {},
};
</script>

<style scoped>
.img {
  width: 40px;
  height: 40px;
}
.box {
  width: 90%;
  margin: 15px auto;
  border-radius: 5px;
  background-color: #f5f5f5;
}
.title {
  margin: 0;
  padding: 10px;
  color: #328a62;
}
.van-cell {
  background-color: #f5f5f5;
}
.btn {
  border: 0px;
  color: #328a62;
}
</style>